<!doctype html>
<html>
<head>
  <title>Femto.css</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noarchive,noindex,nofollow">
  <link rel="stylesheet" href="femto.css">
  <script type="text/javascript" src="femto.js"></script>
</head>
<body>
<nav>
  <a class="femto-nav-logo" href="#top">Femto.css</a>
  <a href="#features">Features</a>
  <a href="#why">Why femto.css</a>
  <a href="#form">Form demo</a>
  <a href="#buttons">Buttons demo</a>
  <a href="#contribute">Contribute!</a>
  <a href="#credits-license">Credits / License</a>
</nav>
<header>
  <h1>Femto.css</h1>
  <strong>No crap, just simple HTML</strong>
</header>
<main>
  <p>
  Femto.css aims to be a very simple CSS framework that lets you generate modern
  webpages without abusing the <code>&lt;div&gt;</code> tag, inline classes or having to spend valuable
  time learning a stilted CSS framework. Femto.css is mainly intended to be used for projects that need
  a website, small businesses and personal websites, but you can use it for anything!
  </p>
    
  <p>
  This software is still in Alpha phase, so it may lack features. You are invited to contribute implementing new features if you want!
  </p>

  <a name="features"></a>
  <h2>Features</h2>
  <ul>
    <li>You only use simple HTML5 tags
    <li>The use of inline classes is reduced as much as possible
    <li>It's responsive, because apparently that's very important
    <li>Oversized images are auto-resized
    <li>Customizable
    <li>Basic, but eye-catching CSS animations and effects for buttons and images
    <li>Inter font family by default (a free modern font family, 0% Google botnet)
    <li>Femto is foss, so yeah, start forking it if you want
  </ul>
  <h3>I'm not experienced using CSS frameworks, can you help me?</h3>
  <p>
  Well, you don't really have to learn how Femto.css actually works because using it for website creation is
  a pretty simple process, if you don't know HTML either, you should watch a short course about HTML5.
  </p>
  <p>
  If you want to know how to use Femto.css on your website, please read the <a href="https://notabug.org/nokoru/femtocss/wiki">wiki/documentation</a>. I wrote a short
  tutorial about how to use the framework.
  </p>

  <h3>I've found a bug!</h3>
  <p>Please read <a href="#contribute">this</a>.</p>

  <a name="why"></a>
  <h2>Why femto.css</h2>
  <p>
  Because modern web development is full of utter crap and unnecessarily complex
  things like bloated JS front-ends, pretty stilted CSS frameworks and forced CDNs, so
  this is my contribution to build a modern, but clean and easy-to-develop internet.
  </p>
  <p>
  femto.css lets you generate modern websites without spending precious time trying to
  learn Bootstrap/Bulma/whatever.
  </p>
  <p>
  To use femto.css you just need to know basic HTML5 tags and basic CSS.
  </p>
  <p>
  My main motivation to create Femto.css is that I'll probably need a modern CSS framework for my future projects' websites.
  </p>

  <a name="form"></a>
  <h2>Form test / demo</h2>

  <form name="test">
    <input type="email" placeholder="Email">
    <br>
    <textarea placeholder="Comment" cols="40" rows="8"></textarea>
    <br>
    <select>
      <option selected>Your opinion...</option>
      <option>Good</option>
      <option>Meh</option>
      <option>Bad</option>
    </select>
    <p>Select an option</p>
    <label><input name="pet" type="radio" checked> Cats</label>
    &nbsp;&nbsp;&nbsp;
    <label><input name="pet" type="radio"> Dogs</label>
    &nbsp;&nbsp;&nbsp;
    <label><input name="pet" type="radio">Other</label>
    <br>
    <label><input name="remember" type="checkbox"> Remember me</label>
    <br>
  </form>
  <button>Submit</button>

  <a name="buttons"></a>
  <h2>Colorful buttons</h2>
  <p>
  This is one of the few Femto.css features that requires (pretty basic) CSS classes. These colors are customizable, you can change them
  by creating your own theme file. The default Femto.css theme is the light theme.
  </p>
  <p style="text-align:center;">
  <a class="femto-btn-1" href="#!">Example 1</a>&nbsp;<a class="femto-btn-2" href="#!">Example 2</a>&nbsp;<a class="femto-btn-3" href="#!">Example 3</a>&nbsp;
  <a class="femto-btn-4" href="#!">Example 4</a>&nbsp;<a class="femto-btn-5" href="#!">Example 5</a>
  </p>
  <p>
  These "buttons" are actually <code>&lt;a&gt;</code> tags.
  </p>

  <a name="contribute"></a>
  <h2>Contribute!</h2>
  <p>
  If you want to become a contributor to Femto.css, you are invited to send me a pull request on the <a href="https://notabug.org/nokoru/femtocss">Femto's notabug.org</a> repository!
  </p>
  <p>
  Aren't you experienced using web technologies / git and want to report a bug or suggest changes/new features? Don't worry, you can <a href="https://notabug.org/nokoru/femtocss/issues">open an issue</a> on the repository
  and we'll try to help you to solve them!
  </p>

  <p align="center"><a href="https://notabug.org/nokoru/femtocss"><img class="femto-zoom-on-hover" style="width:100px;height:100px;" src="img/notabug.png" alt="Femto's notabug repo here"></a></p>

  <a name="credits-license"></a>
  <h2>Credits/License</h2>
  <p>
  Written by <a href="https://nokoru.neocities.org/">nokoru</a> &lt;<a href="mailto:nokoru@disroot.org">nokoru@disroot.org</a>&gt;, femto.css is public domain software released under the <a href="https://unlicense.org/">Unlicense</a>.
  </p>

  <blockquote>
  <p>This is free and unencumbered software released into the public domain.</p>

  <p>
  Anyone is free to copy, modify, publish, use, compile, sell, or
  distribute this software, either in source code form or as a compiled
  binary, for any purpose, commercial or non-commercial, and by any
  means.
  </p>

  <p>
  In jurisdictions that recognize copyright laws, the author or authors
  of this software dedicate any and all copyright interest in the
  software to the public domain. We make this dedication for the benefit
  of the public at large and to the detriment of our heirs and
  successors. We intend this dedication to be an overt act of
  relinquishment in perpetuity of all present and future rights to this
  software under copyright law.
  </p>

  <p>
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
  OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
  ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  OTHER DEALINGS IN THE SOFTWARE.
  </p>

  <p>
  For more information, please refer to &lt;<a href="https://unlicense.org">http://unlicense.org/</a>&gt;
  </p>
  </blockquote>
</main>
<footer>
inspired by Element CSS
</footer>
</body>
</html>
